详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏 |
您所在的位置：网站首页 › layui 分页组件 › 详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏 |
详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏
|
layuiAdmin单页版根据后台json数据动态生成左侧菜单栏 使用模板方式加载菜单 lay-url=“菜单接口” lay-headers=“将token带入请求头”，如果没有，去掉就行 在模板中使用console.log 示例： {{# console.log(1) }} layui.data(‘layuiAdmin’).token 调用本地存储的token,token名需要和本地存储对应 json字段名不需要和这里的一样，json字段名改变，模板里面也要相应的修改 {{# var path = layui.router().path ,dataName = layui.setter.response.dataName; layui.each(d[dataName], function(index, item){ var hasChildren = typeof item.list === 'object' && item.list.length > 0 ,classSelected = function(){ if(index == 0){ return hasChildren ? 'layui-nav-itemed' : 'layui-this'; } return ''; } ,url = typeof item.href === 'string' ? item.href : item.name; }} {{ item.title }} {{# if(hasChildren){ }} {{# layui.each(item.list, function(index2, item2){ var hasChildren2 = typeof item2.list == 'object' && item2.list.length > 0 ,classSelected2 = function(){ if(index==0){ return hasChildren2 ? 'layui-nav-itemed' : 'layui-this'; } return ''; } ,url2 = typeof item2.href === 'string' ? item2.href : [item.name, item2.name, ''].join('/'); }} {{ item2.title }} {{# if(hasChildren2){ }} {{# layui.each(item2.list, function(index3, item3){ var match = path[0] == item.name && path[1] == item2.name && path[2] == item3.name ,url3 = typeof item3.href === 'string' ? item3.href : [item.name, item2.name, item3.name].join('/') }} {{ item3.title }} {{# }); }} {{# } }} {{# }); }} {{# } }} {{# }); }} 登录后复制后台返回的json格式（示例） { "code": 0 ,"msg": "" ,"data": [{ "title": "主页" ,"icon": "layui-icon-home" ,"list": [{ "title": "控制台" ,"jump": "/" }, { "name": "homepage1" ,"title": "主页一" ,"jump": "home/homepage1" }, { "name": "homepage2" ,"title": "主页二" ,"jump": "home/homepage2" }] }, { "name": "component" ,"title": "组件" ,"icon": "layui-icon-component" ,"list": [{ "name": "grid" ,"title": "栅格" ,"list": [{ "name": "list" ,"title": "等比例列表排列" },{ "name": "mobile" ,"title": "按移动端排列" },{ "name": "mobile-pc" ,"title": "移动桌面端组合" },{ "name": "all" ,"title": "全端复杂组合" },{ "name": "stack" ,"title": "低于桌面堆叠排列" },{ "name": "speed-dial" ,"title": "九宫格" }] }, { "name": "button" ,"title": "按钮" }, { "name": "form" ,"title": "表单" ,"list": [{ "name": "element" ,"title": "表单元素" },{ "name": "group" ,"title": "表单组合" }] }, { "name": "nav" ,"title": "导航" }, { "name": "tabs" ,"title": "选项卡" }, { "name": "progress" ,"title": "进度条" }, { "name": "panel" ,"title": "面板" }, { "name": "badge" ,"title": "徽章" }, { "name": "timeline" ,"title": "时间线" }, { "name": "anim" ,"title": "动画" }, { "name": "auxiliar" ,"title": "辅助" }, { "name": "layer" ,"title": "通用弹层" ,"list": [{ "name": "list" ,"title": "功能演示" },{ "name": "special-demo" ,"title": "特殊示例" },{ "name": "theme" ,"title": "风格定制" }] }, { "name": "laydate" ,"title": "日期时间" ,"list": [{ "name": "demo1" ,"title": "功能演示一" },{ "name": "demo2" ,"title": "功能演示二" },{ "name": "theme" ,"title": "设定主题" },{ "name": "special-demo" ,"title": "特殊示例" }] }, { "name": "table" ,"title": "表格" ,"list": [{ "name": "simple" ,"title": "简单数据表格" },{ "name": "auto" ,"title": "列宽自动分配" },{ "name": "data" ,"title": "赋值已知数据" },{ "name": "tostatic" ,"title": "转化静态表格" },{ "name": "page" ,"title": "开启分页" },{ "name": "resetPage" ,"title": "自定义分页" },{ "name": "toolbar" ,"title": "开启头部工具栏" },{ "name": "totalRow" ,"title": "开启合计行" },{ "name": "height" ,"title": "高度最大适应" },{ "name": "checkbox" ,"title": "开启复选框" },{ "name": "radio" ,"title": "开启单选框" },{ "name": "cellEdit" ,"title": "开启单元格编辑" },{ "name": "form" ,"title": "加入表单元素" },{ "name": "style" ,"title": "设置单元格样式" },{ "name": "fixed" ,"title": "固定列" },{ "name": "operate" ,"title": "数据操作" },{ "name": "parseData" ,"title": "解析任意数据格式" },{ "name": "onrow" ,"title": "监听行事件" },{ "name": "reload" ,"title": "数据表格的重载" },{ "name": "initSort" ,"title": "设置初始排序" },{ "name": "cellEvent" ,"title": "监听单元格事件" },{ "name": "thead" ,"title": "复杂表头" }] }, { "name": "laypage" ,"title": "分页" ,"list": [{ "name": "demo1" ,"title": "功能演示一" },{ "name": "demo2" ,"title": "功能演示二" }] }, { "name": "upload" ,"title": "上传" ,"list": [{ "name": "demo1" ,"title": "功能演示一" },{ "name": "demo2" ,"title": "功能演示二" }] }, { "name": "colorpicker" ,"title": "颜色选择器" }, { "name": "slider" ,"title": "滑块组件" }, { "name": "rate" ,"title": "评分" }, { "name": "carousel" ,"title": "轮播" }, { "name": "flow" ,"title": "流加载" }, { "name": "util" ,"title": "工具" }, { "name": "code" ,"title": "代码修饰" }, { "name": "layim" ,"title": "即时聊天" ,"jump": "senior/im/" }] }, { "name": "template" ,"title": "页面" ,"icon": "layui-icon-template" ,"list": [{ "name": "personalpage" ,"title": "个人主页" ,"jump": "template/personalpage" },{ "name": "addresslist" ,"title": "通讯录" ,"jump": "template/addresslist" },{ "name": "caller" ,"title": "客户列表" ,"jump": "template/caller" },{ "name": "goodslist" ,"title": "商品列表" ,"jump": "template/goodslist" },{ "name": "msgboard" ,"title": "留言板" ,"jump": "template/msgboard" },{ "name": "search" ,"title": "搜索结果" ,"jump": "template/search" },{ "name": "reg" ,"title": "注册" ,"jump": "user/reg" },{ "name": "login" ,"title": "登入" ,"jump": "user/login" },{ "name": "forget" ,"title": "忘记密码" ,"jump": "user/forget" },{ "name": "404" ,"title": "404" ,"jump": "template/tips/404" },{ "name": "error" ,"title": "错误提示" ,"jump": "template/tips/error" }, { "name": "" ,"title": "内嵌页面" ,"spread": true ,"list": [{ "name": "" ,"title": "百度一下" ,"jump": "/iframe/link/baidu" }, { "name": "" ,"title": "layui官网" ,"jump": "/iframe/link/layui" }, { "name": "" ,"title": "layuiAdmin官网" ,"jump": "/iframe/link/layuiAdmin" }] }] }, { "name": "app" ,"title": "应用" ,"icon": "layui-icon-app" ,"list": [{ "name": "content" ,"title": "内容系统" ,"list": [{ "name": "list" ,"title": "文章列表" },{ "name": "tags" ,"title": "分类管理" },{ "name": "comment" ,"title": "评论管理" }] },{ "name": "forum" ,"title": "社区系统" ,"list": [{ "name": "list" ,"title": "帖子列表" },{ "name": "replys" ,"title": "回帖列表" }] },{ "name": "message" ,"title": "消息中心" },{ "name": "workorder" ,"title": "工单系统" ,"jump": "app/workorder/list" }] }, { "name": "senior" ,"title": "高级" ,"icon": "layui-icon-senior" ,"list": [{ "name": "im" ,"title": "通讯系统" },{ "name": "echarts" ,"title": "Echarts集成" ,"list": [{ "name": "line" ,"title": "折线图" },{ "name": "bar" ,"title": "柱状图" },{ "name": "map" ,"title": "地图" }] }] }, { "name": "user" ,"title": "用户" ,"icon": "layui-icon-user" ,"list": [{ "name": "user" ,"title": "网站用户" ,"jump": "user/user/list" }, { "name": "administrators-list" ,"title": "后台管理员" ,"jump": "user/administrators/list" }, { "name": "administrators-rule" ,"title": "角色管理" ,"jump": "user/administrators/role" }] }, { "name": "set" ,"title": "设置" ,"icon": "layui-icon-set" ,"list": [{ "name": "system" ,"title": "系统设置" ,"spread": true ,"list": [{ "name": "website" ,"title": "网站设置" },{ "name": "email" ,"title": "邮件服务" }] },{ "name": "user" ,"title": "我的设置" ,"spread": true ,"list": [{ "name": "info" ,"title": "基本资料" },{ "name": "password" ,"title": "修改密码" }] }] }, { "name": "get" ,"title": "授权" ,"icon": "layui-icon-auz" ,"jump": "system/get" }] }登录后复制效果图：
推荐教程：《layui框架教程》 以上就是详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏的详细内容，更多请关注php中文网其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |